<template>
	<view class="diet">
		<view class="start">
			<uni-icons type="left" color="#FFFFFF" size="28" @click="back" class="left"></uni-icons>
		</view>
		<van-tabs v-model:active="active" color="#ff4d4f" title-active-color="#ff4d4f" class="diet-tab">
			<van-tab title="今日记录">
				<view class="select-time">
					<view class="select-time-title">选择就餐时间</view>
					<view class="select-time-content">
						<van-field v-model="fieldValue" is-link readonly label="就餐时间" placeholder="选择就餐时间"
							@click="showPicker = true" />
						<van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
							<van-picker :model-value="pickerValue" :columns="columns" @cancel="showPicker = false"
								@confirm="onConfirm" />
						</van-popup>
					</view>
				</view>
				<view class="text-input">
					<view class="text-input-title">输入文本（可选）</view>
					<view class="text-input-content">
						<textarea auto-height />
					</view>
				</view>
				<view class="upload">
					<view class="upload-title">上传图片（可选）</view>
					<view class="upload-content">
						<van-uploader v-model="fileList" multiple />
					</view>
				</view>
				<button class="submit-button" @click="getNutrition">提交</button>
				<view class="nutrition-box">
					<view class="item" v-for="(item, index) in nutritionData.list" :key="index">
						{{item}}
					</view>
				</view>
			</van-tab>
			<van-tab title="往日报告" class="report">
				<uni-section :title="'选择日期'" type="line"></uni-section>
				<view class="date-picker">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single"/>
				</view>
				<view class="content">
					<view class="report-content">
						<view class="title">报告</view>
						<view class="">餐次：{{reportData.food}}</view>
						<view class="text">
							营养情况：{{reportData.text}}
						</view>
					</view>
					<view class="advice">
						<view class="title">建议</view>
						<view class="item" v-for="(item, index) in reportData.advice" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<button class="confirm-button" @click="showData">确定</button>
			</van-tab>
		</van-tabs>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		Picker,
		Field,
		Popup,
		Tab,
		Tabs
	} from 'vant';

	const columns = [{
			text: '早餐',
			value: 'breakfast'
		},
		{
			text: '午餐',
			value: 'lunch'
		},
		{
			text: '晚餐',
			value: 'dinner'
		},
		{
			text: '其他',
			value: 'else'
		}
	];
	const reportData = ref({})
	const nutritionData = ref({})
	const fieldValue = ref('');
	const showPicker = ref(false);
	const pickerValue = ref([]);

	const onConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		showPicker.value = false;
		pickerValue.value = selectedValues;
		fieldValue.value = selectedOptions[0].text;
	};

	const fileList = ref([

	]);

	const afterRead = (file) => {
		file.status = 'uploading';
		file.message = '上传中...';

		setTimeout(() => {
			file.status = 'failed';
			file.message = '上传失败';
		}, 1000);
	};

	const back = () => {
		uni.navigateBack()
	}
	const getNutrition = () => {
		console.log("1111");
		nutritionData.value = {
			list:[
				"热量：约230千卡",
				"蛋白质：约6克",
				"脂肪：约10克",
				"碳水化合物：约28克"
			]
		}
	}
	
	const showData = () => {
		reportData.value = {
			food:"早餐",
			text:"摄入约230千卡热量，6克蛋白质，10克脂肪，28克碳水化合物",
			advice:[
			"增加蔬菜和水果的摄入，补充维生素和矿物质。",
			"控制总热量摄入，保持饮食平衡。",
			"适量增加蛋白质来源，如鸡蛋、牛奶或豆制品"]
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.diet {
		background-color: #F5F5F5;
	}

	.start {
		height: 80rpx;
		background-color: #ff4d4f;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 8;
	}

	.left {
		padding-left: 20rpx;
	}
	
	.date-picker {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.report {
		background-color: #FFFFFF;
	}

	.diet-tab {
		padding-top: 80rpx;
	}

	::v-deep .van-tab__text {
		font-size: 15px !important;
	}

	.select-time {
		padding-top: 30rpx;
	}

	.select-time-title {
		padding-left: 30rpx;
	}

	.select-time-content {
		padding-top: 30rpx;
	}

	.text-input {}

	.text-input-title {
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
	}

	.text-input-content {
		background-color: #FFFFFF;
		height: 200rpx;
	}

	.upload {
		padding-top: 30rpx;
	}

	.upload-title {
		padding-left: 30rpx;
		padding-bottom: 30rpx;
	}

	.upload-content {
		background-color: #FFFFFF;
		padding-left: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.submit-button {
		background-color: #ff4d4f;
		color: #F5F5F5;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.confirm-button {
		background-color: #ff4d4f;
		color: #F5F5F5;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		width: 92%;
	}
	.content{
		padding: 0 30rpx;
		.report-content{
			margin: 50rpx 0;
		}
	}
</style>